<template>
  <div>
    <a-card style="width: 100%" :title="element?.componentProps?.header">
      <div class="draggable-container card-body" v-if="lowCode.isDesigner">
        <draggable
          :key="element.metaRefresh"
          class="drawing-board"
          v-model="element.items"
          @add="handleAdd($event)"
          v-bind="{ group: 'group', animation: 200 }"
          tag="div"
          item-key="key"
          handle=".mover"
          :component-data="{ name: 'fade' }"
          :disabled="
            lowCode.disabled && element?.nestedChain?.indexOf('dialog') == -1
          "
        >
          <template #item="{ element: el, index }">
            <div>
              <render-parse
                :element="el"
                :key="el.key"
                :index="index"
                :parent="element"
              >
                <!-- 关键点：把当前组件的所有插槽透传下去 -->
                <template
                  v-for="(_, name) in $slots"
                  :key="name"
                  #[name]="data"
                >
                  <slot :name="name" v-bind="data" />
                </template>
              </render-parse>
            </div>
          </template>
        </draggable>
      </div>
      <div v-else class="card-body drawing-board">
        <template tag="div" v-for="(el, index) in element.items" :key="index">
          <div v-if="element.key">
            <render-parse
              :element="el"
              :key="el.key"
              :index="index"
              :parent="element.items"
            >
              <!-- 关键点：把当前组件的所有插槽透传下去 -->
              <template v-for="(_, name) in $slots" :key="name" #[name]="data">
                <slot :name="name" v-bind="data" />
              </template>
            </render-parse>
          </div>
        </template>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, toRefs } from "vue";
import type { LowCodeImp, ComponentImp } from "@/components/low-code/core/type";
import { tools } from "@/components/low-code/page-designer/utils";
import clone from "clone";
import { useComponentPretreatment } from "@/components/low-code/page-designer/hooks";

export default defineComponent({
  name: "cardWidget",
  props: ["element"],
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const { element } = toRefs(props);
    const component = lowCode.dataCenter[element.value.key] as ComponentImp;

    const handleAdd = (event: { newIndex: number }) => {
      let hasKey = false;
      const newIndex = event.newIndex;
      if (element.value.items[newIndex]) {
        /****
         * 组件预处理
         */
        if (useComponentPretreatment(lowCode, element.value, newIndex))
          return false;

        hasKey = element.value.items[newIndex].key ? true : false;
        let cacheObject = component.addItem(
          element.value.items[newIndex]
        ) as ComponentImp;
        cacheObject.nestedChain = element.value.nestedChain + "_card";
        element.value.items[newIndex] = cacheObject;
        lowCode.setcurrentKey(cacheObject.key);
      }
      console.log("element.value.key", element.value.key);
      hasKey && element.value.updateMetaRefresh();
      tools.handleStack.push(clone(lowCode));
    };

    return {
      lowCode,
      element,
      handleAdd,
    };
  },
});
</script>

<style scoped>
.drawing-board {
  min-height: 150px;
}
</style>
